@()(implicit session: Session)
    @english.home.main("BLAST - Tools") {

        <div id="content">
            <h1 class="title">Tool - BLAST</h1>
            <div class="line"></div>
            <ul class="tabs">
                <li><a href="#blastn">Blastn Gene</a></li>
                <li><a href="#blastnGenome">Blastn Genome</a></li>
                <li><a href="#blastp">Blastp</a></li>
            </ul>
            <div class="tab_container" style="margin-bottom: 30px">
                <div style="display: none;" id="blastn" class="tab_content">
                    <h4>Blastn Against Gene</h4>
                    <form class="form-horizontal" method="get" id="form">


                        <input class="form-control" name="blastType" value="blastn" style="display: none;box-sizing: border-box">

                        <div class="form-group">
                            <label class="control-label col-sm-3">Type of query:</label>
                            <div class="col-sm-4">
                                <select class="form-control" onchange="change(this, 'blastn')" name="method">
                                    <option selected value="text">Text</option>
                                    <option value="file">File</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group" id="blastnQueryContent">
                            <label class="control-label col-sm-3">Enter FASTA sequences:</label>
                            <div class="col-sm-8">
                                <textarea class="form-control monospace" name="queryText" id="queryText" rows="5"></textarea>
                                <span class="help-block">
                                    e.g.,&nbsp;<a href="#" onclick="showExample('dna', 'form')"><em id="egQuery">
                                    example</em></a></span>
                            </div>
                        </div>

                        <div class="form-group" id="blastnQueryFile" style="display: none;">
                            <label class="control-label col-sm-3">upload file:</label>
                            <div class="col-sm-8">
                                <input id="input-1" type="file" class="file control-label" name="file" data-show-preview="false"
                                data-show-upload="false" accept=".fa,.fasta">
                                <span class="help-block"><a href="/eucalyptus/utils/downloadExample?example=blastn_example.fasta"><em id="egCrics">
                                    Example_File</em></a></span>
                            </div>
                        </div>

                        <div class="form-group" id="againstType" style="display: none">
                            <label class="control-label col-sm-3">Database:</label>
                            <div class="col-sm-4 control-label" style="text-align: left">
                                <label><input type="checkbox" value="cp" name="db[]" /> Chloroplast</label>
                                <label><input type="checkbox" value="mt" name="db[]" /> Mitochondria</label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-sm-3">Evalue:</label>
                            <div class="col-sm-2">
                                <input class="form-control" name="evalue" id="evalue" value="1e-5">
                            </div>

                            <label class="control-label col-sm-2">Word size:</label>
                            <div class="col-sm-2">
                                <input class="form-control" name="wordSize" id="wordSize" value="28">
                            </div>

                        </div>

                        <div class="form-group">
                            <label class="control-label col-sm-3">Max target seqs:</label>
                            <div class="col-sm-2">
                                <input class="form-control" name="maxTargetSeqs" id="mCharacteristic" value="10">
                            </div>
                        </div>

                        <hr>
                        <div class="form-group">
                            <div class="actions col-sm-offset-3 col-sm-3">
                                <a href="#" class="button blue" onclick="blast('form')">Search</a>
                            </div>
                            <div class="actions col-sm-3">
                                <button type="reset" onclick="Reset('blastn')" class="button blue">
                                    Reset</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div style="display: none;" id="blastnGenome" class="tab_content">
                    <h4>Blastn Against Genome</h4>
                    <form class="form-horizontal" method="get" id="genomeForm">


                        <input class="form-control" name="blastType" value="blastnGenome" style="display: none;">

                        <div class="form-group">
                            <label class="control-label col-sm-3">Type of query:</label>
                            <div class="col-sm-4">
                                <select class="form-control" onchange="change(this, 'blastnGenome')" name="method">
                                    <option selected value="text">Text</option>
                                    <option value="file">File</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group" id="blastnGenomeQueryContent">
                            <label class="control-label col-sm-3">Enter FASTA sequences:</label>
                            <div class="col-sm-8">
                                <textarea class="form-control monospace" name="queryText" id="queryText" rows="5"></textarea>
                                <span class="help-block">
                                    e.g.,&nbsp;<a href="#" onclick="showExample('dna', 'genomeForm')"><em id="egQuery">
                                    example</em></a></span>
                            </div>
                        </div>

                        <div class="form-group" id="blastnGenomeQueryFile" style="display: none;">
                            <label class="control-label col-sm-3">upload file:</label>
                            <div class="col-sm-8">
                                <input id="input-1" type="file" class="file control-label" name="file" data-show-preview="false"
                                data-show-upload="false" accept=".fa,.fasta">
                                <span class="help-block"><a href="/eucalyptus/utils/downloadExample?example=blastn_example.fasta"><em id="egCrics">
                                    Example_File</em></a></span>
                            </div>
                        </div>

                        <div class="form-group" id="againstType" style="display: none">
                            <label class="control-label col-sm-3">Database:</label>
                            <div class="col-sm-4 control-label" style="text-align: left">
                                <label><input type="checkbox" value="cp" name="db[]" /> Chloroplast</label>
                                <label><input type="checkbox" value="mt" name="db[]" /> Mitochondria</label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-sm-3">Evalue:</label>
                            <div class="col-sm-2">
                                <input class="form-control" name="evalue" id="evalue" value="1e-5">
                            </div>

                            <label class="control-label col-sm-2">Word size:</label>
                            <div class="col-sm-2">
                                <input class="form-control" name="wordSize" id="wordSize" value="28">
                            </div>

                        </div>

                        <div class="form-group">
                            <label class="control-label col-sm-3">Max target seqs:</label>
                            <div class="col-sm-2">
                                <input class="form-control" name="maxTargetSeqs" id="mCharacteristic" value="10">
                            </div>
                        </div>

                        <hr>
                        <div class="form-group">
                            <div class="actions col-sm-offset-3 col-sm-3">
                                <a href="#" class="button blue" onclick="blast('genomeForm')">Search</a>
                            </div>
                            <div class="actions col-sm-3">
                                <button type="reset" onclick="Reset('blastnGenome')" class="button blue">
                                    Reset</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div style="display: none;
                    padding-right: 20px" id="blastp" class="tab_content">
                    <h4>Blastp Against Protein</h4>
                    <form class="form-horizontal" method="get" id="blastpForm" >


                        <input class="form-control" name="blastType" value="blastp" style="display: none;">


                        <div class="form-group">
                            <label class="control-label col-sm-3">Type of query:</label>
                            <div class="col-sm-4">
                                <select class="form-control" onchange="change(this, 'blastp')" name="method">
                                    <option selected value="text">Text</option>
                                    <option value="file">File</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group" id="blastpQueryContent" >
                            <label class="control-label col-sm-3">Enter FASTA sequences:</label>
                            <div class="col-sm-8">
                                <textarea class="form-control monospace" name="queryText" id="queryText" rows="5"></textarea>
                                <span class="help-block">
                                    e.g.,&nbsp;<a href="#" onclick="showExample('protein', 'blastpForm')"><em id="egQuery">
                                    example</em></a></span>
                            </div>
                        </div>

                        <div class="form-group" id="blastpQueryFile" style="display: none;">
                            <label class="control-label col-sm-3">Upload file:</label>
                            <div class="col-sm-8">
                                <input id="input-1" type="file" class="file control-label" name="file" data-show-preview="false"
                                data-show-upload="false" accept=".fa,.fasta">
                                <span class="help-block"><a href="/eucalyptus/utils/downloadExample?example=blastp_example.fasta"><em>
                                    Example file</em></a></span>
                            </div>
                        </div>

                        <div class="form-group" id="againstType" style="display: none">
                            <label class="control-label col-sm-3">Database:</label>
                            <div class="col-sm-4 control-label" style="text-align: left">
                                <label><input type="checkbox" value="cp" name="db[]" /> Chloroplast</label>
                                <label><input type="checkbox" value="mt" name="db[]" /> Mitochondria</label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-sm-3">Evalue:</label>
                            <div class="col-sm-2">
                                <input class="form-control" name="evalue" id="evalue" value="1e-5">
                            </div>

                            <label class="control-label col-sm-2">Word size:</label>
                            <div class="col-sm-2">
                                <input class="form-control" name="wordSize" id="wordSize" value="3">
                            </div>

                        </div>

                        <div class="form-group">
                            <label class="control-label col-sm-3">Max target seqs:</label>
                            <div class="col-sm-2">
                                <input class="form-control" name="maxTargetSeqs" id="mCharacteristic" value="10">
                            </div>
                        </div>

                        <hr>
                        <div class="form-group">
                            <div class="actions col-sm-offset-3 col-sm-3">
                                <a href="#" class="button blue" onclick="blast('blastpForm')">Search</a>
                            </div>
                            <div class="actions col-sm-3">
                                <button type="reset" onclick="Reset('blastp')" class="button blue">
                                    Reset</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <a href="#result"><div id="showResult"></div></a>

            <div id="result" style="display: none;">
                <hr>
                <h4 style="float: left;
                    margin-left: 10px">Result:</h4>
                <a href="#" class="button blue" onclick="downloadExcel()" style="float: left;
                    margin-left: 15px;
                    margin-top: -5px;
                    width: 60px">Download</a>
                <iframe id="frame" style="width: 900px;margin-left: -7px;" height="1000px" frameborder="0" align="middle">

                </iframe>
            </div>
        </div>
        </div>
            <!-- End Content -->
        <div class="clear"></div>

        <script>

                var excel = "";


                var dna = ">example1\n" +
                        "TGCGATGATTTTTTTCAACAAATCATAAAGATATTGGCACTCTTTACATTTTATTTGGGACCTTAATGCTAGGGGCACCTGATATGGCTTTTCCTCGGTTAAATAATATAAGGTTTTGATTACTTCCTCCGTCGTTATGTTTGCTTTTAGGCTCTGCAGCGGTAGAAAGTGGAGTTGGGACTGGATGAACCGTCTATCCTCCTTTGGCAGGAAATATCGCACATGCTGGAGGCTCTGTAGACTTAGCTATTTTTTCCTTACATCTTGCAGGTGTGTCTTCAATCTTAGGAGCATTAAATTGGGGGGGGGATCCTATTTTATATCAACACTTATTTTGATTTTTTGGTCATCCAGAAGTTTATATTTTAATTCTTCCTGGGTTTGGTATAATTTCTCACATTGTTATGCATTATGCTTCTAAGAAAGAAACATTTGGAACTTTGGGGATAATTTATGCGATACTTGCTATTGGATTATTAGGATTTATTGTCTGAGCTCATCACATATTTGTTGTGGGGATAGATGTTGATACACGGGCTTATTTTACGGCTGCCACTATAATTATTGCTGTACCAACGGGAATTAAAATCTTTAGTTGACTTGCTACAGTTCATGGGGCTCGAGTAAAATATGAAGCCCCTATAATATGGGCTTTAGGGTGGGCTGTTTTTGCTTTATTCGGAGCTTTTAATTATTGGTATCCTTTAATTTCGGGGCTGGCGCTTCATGAGCGATGAACAAAATCTCATTTTTTAATTATATTTATTGGAGTAAATTTAACATTTTTTCCTCAGCATTTTTTAGGATTAAGTGGTATACCTCGACGATATTCAGATTATCCTGATTCTTATATAAAGTGAAATGTAATTTCTTCTATTGGATCCTTAATTTCTTTTGTTGCTGTATTATTTTTTATATTTATTATTTGAGAGAGATTAATTGTTCAGCGGGGAGTAATATGAAGAAGTCATTTAAGATCTGCTTTAGAGTGGGATAACTTAGTTCCTTTAAATTTTCATAGTAGAGATGAAACAGGTGCAATTATTATTAATTTAAATTAAT\n" +
                        ">example2\n" +
                        "GATAATGGTAATTATTTTTTCATTAATTTTGAGACTTTCATTTATAATACTAATTCTTAATCAGCCCCTAACATTAGGATTATTTATCCTTTTTAATAGTTTTTTAATAAGAATTAGGATCTATTTTCAGGAAAAAGCTTGATTCAGATTTATTTTATTTTTGGTTTATATTGGTGGAATATTAGTGATGTTTGCCTACATTACCACCTTAATTCCTAACTTAGCTTTCAAATCAATCAATTTAACTAGATTGTTTATTATAATCGAAATTTTTTGATTTATTTTACTAAGAAACTCTACATTGCTGGGTTTTCCATTTAATAAAAGAAATATAAATATAGAATTAACAGTATCTTATATTAATAATTGGGGGGGATCTTTATTTTCTTTATTTAATATTATTATAATAATAAGTTTAGCTAGGATTTTATTATTTATTCTAATCTGTGTAGTAAAAATTTGTTATTTTAGTAAAGGGCCATTACGGCCTTTTAAATA\n"
                var pro = ">example1\n" +
                        "MVIIKKTHNSFSLKHRHCNHTLKFGRLGLKILSFSKITENQFNLIERLSL\n" +
                        "KFLKNLSGNKKLIKIWSLVPFNLTLTKLSSEARMGKGKGAVYSRAFFLRP\n" +
                        "GSILFEFEGVSKHQLTQISSILRKKTSFRIVEVQLPSK\n" +
                        ">example2\n" +
                        "MQSFFTQWISRWIFSTNHKDIGTLYLIFGAFSGVLGGCMSMLIRMELAQP\n" +
                        "SNHLLLGNHQIYNVLITAHAFLMIFFMVMPVMIGGFGNWLVPIMIGSPDM\n" +
                        "AFPRLNNISFWLLPPSLCLLLMSALVEVGVGTGWTVYPPLSSIQSHSGGA\n" +
                        "VDLAIFSLHISGASSILGAVNFISTILNMRSPGQSMYRIPLFVWSILVTA\n" +
                        "FLLLLAVPVLAGAITMLLTDRNFNTSFFDASGGGDPILYQHLFWFFGHPE\n" +
                        "VYILILPGFGMISHIVSTFSRKPVFGYIGMVYAMVSIGVLGFIVWAHHMY\n" +
                        "TVGLDVDTRAYFTAATMIIAVPTGIKIFSWIATIWEGSIHLKTPMLFAIG\n" +
                        "FIFLFTIGGLTGIVLANSGLDISLHDTYYVVAHFHYVLSMGAVFAIFAGF\n" +
                        "YYWFGKITGLQYPETLGQIHFWSTFIGVNLTFMPMHFLGLAGMPRRIPDY\n" +
                        "PDAYAGWNLIASYGSYIALFSTLFFFYIVFVSLTSNNPCTNFPWEFNKSK\n" +
                        "TYGVSTLEWIVTSPPAYHTFEEMPLIYETKSN";

                $(function () {

                    formValidation()
                });


                function change(element, t) {
                    var value = $(element).find(">option:selected").val();
                    if (value == "text") {
                        $(".fileinput-remove-button").click();
                        $("#" + t + "QueryContent").show();
                        $("#" + t + "QueryFile").hide()
                    } else {
                        $(".blast-text").val("");
                        $("#" + t + "QueryContent").hide();
                        $("#" + t + "QueryFile").show()
                    }
                }

                function downloadExcel() {
                    var fileName = "blast.xls";
                    var content = excel;
                    var blob = new Blob([content], {
                        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
                    });
                    saveAs(blob, fileName)
                }

                function showExample(type, formId) {
                    var seq = "";

                    if (type == "protein") {
                        seq = pro;
                    } else {
                        seq = dna;
                    }

                    $("#" + formId + " #queryText").val(seq);
                    $("#" + formId).formValidation("revalidateField", "queryText")
                }

                function blast(formId) {
                    var form = $("#" + formId);
                    form.formValidation("revalidateField", "queryText");
                    form.formValidation("revalidateField", "file");
                    var fv = form.data("formValidation");
                    fv.validate();
                    if (fv.isValid()) {
                        var form1 = new FormData($("#" + formId)[0]);

                        var index = layer.load(1, {
                            shade: [0.1, '#fff']
                        });

                        $.ajax({
                            url: "@routes.ToolsController.blastRun()",
                            type: "post",
                            processData: false,
                            contentType: false,
                            data: form1,
                            success: function (data) {
                                layer.close(index);
                                if (data.valid == "false") {
                                    swal("Error", data.message, "error");
                                    $("#result").hide()
                                } else {
                                    $("#frame").attr("src", "/mollusk/tools/blastResultBefore?path=" + data.html + "&types=" +
                                            data.types + "&db=" + data.db);

                                    excel = data.excel;
                                    $("#result").show();
                                    //click事件不能直接绑定在a标签上，必须在a标签内的元素里
                                    $("#showResult").click();
                                }
                            }
                        });
                    }
                }

                function formValidation() {
                    let queryText = {
                        validators: {
                            notEmpty: {
                                message: 'This is not be empty!'
                            }
                        }
                    }
                    let file = {
                        validators: {
                            notEmpty: {
                                message: 'File is required！'
                            },
                            file: {
                                extension: 'fa,fasta',
                                message: 'Query file must is a fasta file！'
                            }
                        }
                    };
                    let db = {
                        validators: {
                            notEmpty: {
                                message: "Database is required！"
                            }
                        }
                    }
                    let evalue = {
                        validators: {
                            notEmpty: {
                                message: 'Evalue is required！'
                            },
                            numeric: {
                                message: 'Evalue must be number！'
                            },
                            greaterThan: {
                                value: 0,
                                message: "Evalue must greater than or equal to 0！"
                            }
                        }
                    }
                    let wordSize = {
                        validators: {
                            notEmpty: {
                                message: 'Word size is required！'
                            },
                            integer: {
                                message: 'Word size must be intger！'
                            },
                            greaterThan: {
                                value: 4,
                                message: "Word size must greater than or equal to 4！"
                            }
                        }
                    }
                    let maxTargetSeqs = {
                        validators: {
                            notEmpty: {
                                message: 'Max target seqs is required！'
                            },
                            integer: {
                                message: 'Max target seqs must be integer！'
                            },
                            greaterThan: {
                                value: 0,
                                message: "Max target seqs must greater than or equal to 0！"
                            }
                        }
                    }
                    $('#form').formValidation({
                        framework: 'bootstrap',
                        icon: {
                            valid: 'glyphicon glyphicon-ok',
                            invalid: 'glyphicon glyphicon-remove',
                            validating: 'glyphicon glyphicon-refresh'
                        },
                        fields: {
                            queryText: queryText,
                            file: file,
                            'db[]': db,
                            evalue: evalue,
                            wordSize: wordSize,
                            maxTargetSeqs: maxTargetSeqs
                        }
                    });
                    $('#genomeForm').formValidation({
                        framework: 'bootstrap',
                        icon: {
                            valid: 'glyphicon glyphicon-ok',
                            invalid: 'glyphicon glyphicon-remove',
                            validating: 'glyphicon glyphicon-refresh'
                        },
                        fields: {
                            queryText: queryText,
                            file: file,
                            'db[]': db,
                            evalue: evalue,
                            wordSize: wordSize,
                            maxTargetSeqs: maxTargetSeqs
                        }
                    });
                    $('#blastpForm').formValidation({
                        framework: 'bootstrap',
                        icon: {
                            valid: 'glyphicon glyphicon-ok',
                            invalid: 'glyphicon glyphicon-remove',
                            validating: 'glyphicon glyphicon-refresh'
                        },
                        fields: {
                            queryText: queryText,
                            file: file,
                            'db[]': db,
                            evalue: evalue,
                            wordSize: {
                                validators: {
                                    notEmpty: {
                                        message: 'Word size is required！'
                                    },
                                    integer: {
                                        message: 'Word size must be intger！'
                                    },
                                    between: {
                                        min: 0,
                                        max: 8,
                                        inclusive: false,
                                        message: "Word size must less than  8！"
                                    }
                                }
                            },
                            maxTargetSeqs: maxTargetSeqs
                        }
                    });
                }

                $("#input-1").fileinput({
                    showPreview: false
                });

                function Reset(obj) {
                    $("#" + obj + "QueryContent").show();
                    $("#" + obj + "QueryFile").hide();


                }



        </script>


    }